<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
    <!-- <template slot="top"> -->
    <template #top>
      <view w-full bg="#f4f4f4">
        <u-navbar
          back-text=""
          title="购票订单"
          :background="navBackground"
          back-icon-size="30rpx"
          :is-fixed="true"
          title-color="#000"
          back-icon-color="#000"></u-navbar>
        <view h-100rpx w-full box-border pt-20rpx px-20rpx>
          <view h-80rpx w-full box-border px-40rpx rounded-40rpx bg="#fff" flex justify-between items-center>
            <input
              type="text"
              placeholder="搜索购票订单......"
              w-full
              mr-40rpx
              confirm-type="search"
              v-model="query.orderNo"
              @confirm="handleQuery" />
            <image w-40rpx h-40rpx shrink-0 @click="handleQuery" src="@/pages/ticket/static/search.png"></image>
          </view>
        </view>
        <view w-full item-center>
          <nut-tabs v-model="query.orderStatus" title-scroll  @change="handleQuery">
            <nut-tab-pane v-for="tab in tabs" :title="tab.title" :pane-key="tab.value"></nut-tab-pane>
          </nut-tabs>
        </view>
      </view>
    </template>

    <!-- </template> -->
    <view
      class="item"
      v-for="(item, index) in dataList"
      :key="index"
      w-710rpx
      ml-20rpx
      box-border
      pa-20rpx
      mb-20rpx
      rounded-20rpx
      bg="#fff"
      text="#000">
      <view @click="toDetail(item)" w-full box-border flex justify-between items-center text-28rpx>
        <view>{{ item.refundOrderNo || item.orderNo }}</view>
        <view v-if="[1,2,3,4].includes(item.refundStatus)" class="text-#FA2C19">{{ refundStatus[item.refundStatus] }}</view>
        <view v-else :class="{ 'text-#FA2C19': [5,6,7].includes(item.orderStatus)}">{{ orderStatus[item.orderStatus] }}</view>
      </view>
      <view @click="toDetail(item)" w-full box-border flex items-center mt-40rpx>
        <image mode="aspectFill" w-180rpx h-180rpx rounded-20rpx mr-30rpx shrink-0 :src="item.goodsImg"></image>
        <view w-full h-180rpx flex flex-col justify-between>
          <view line-clamp-1 break-all text-32rpx font-bold>{{ item.goodsName }}</view>
          <view mt-22rpx flex overflow-x-auto w-400rpx style="white-space: nowrap">
            <view
              h-40rpx
              px-20rpx
              box-border
              rounded-20rpx
              bg="#FCC300"
              text="#000"
              text-20rpx
              flex
              justify-center
              items-center
              mr-20rpx
              shrink-0>
              {{ item.goodsType == 1 ? '电子票' : '智能卡' }}
            </view>
            <view
              v-if="item.labelName1"
              h-40rpx
              px-10rpx
              box-border
              rounded-20rpx
              bg="#EEEEEE"
              text="#484848"
              text-20rpx
              flex
              justify-center
              items-center
              mr-20rpx
              shrink-0>
              {{ item.labelName1 }}
            </view>
            <view
              v-if="item.labelName2"
              h-40rpx
              px-10rpx
              box-border
              rounded-20rpx
              bg="#EEEEEE"
              text="#484848"
              text-20rpx
              flex
              justify-center
              items-center
              mr-20rpx
              shrink-0>
              {{ item.labelName2 }}
            </view>
            <view
              v-if="item.labelName3"
              h-40rpx
              px-10rpx
              box-border
              rounded-20rpx
              bg="#EEEEEE"
              text="#484848"
              text-20rpx
              flex
              justify-center
              items-center
              mr-20rpx
              shrink-0>
              {{ item.labelName3 }}
            </view>
          </view>
          <view w-full mt-10rpx flex justify-end items-center>
            <view mr-20rpx text-24rpx>{{ item.orderStatus == 0 || item.orderStatus == 4 ? '应付' : '实付' }}款</view>
            <view flex items-end font-bold>
              <view mb-6rpx text-20rpx mr-4rpx>¥</view>
              <view text-36rpx>{{ item.totalActualAmount }}</view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="![1,2,3,4].includes(item.refundStatus)" flex items-center justify-end mt-40rpx>
        <template v-if="item.orderStatus == 0">
          <cancel-order :orderId="item.orderId" @refresh="handleQuery">
            <view
              h-60rpx
              rounded-30rpx
              flex
              justify-center
              items-center
              ml-20rpx
              box-border
              px-30rpx
              text-28rpx
              style="border: 2rpx solid #d9d9d9">
              取消订单
            </view>
          </cancel-order>
        </template>
        <template v-if="item.orderStatus == 3 || item.orderStatus == 4 || item.orderStatus == 5">
          <del-order :orderId="item.orderId" @refresh="handleQuery">
            <view
              h-60rpx
              rounded-30rpx
              flex
              justify-center
              items-center
              ml-20rpx
              box-border
              px-30rpx
              text-28rpx
              style="border: 2rpx solid #d9d9d9">
              删除订单
            </view>
          </del-order>
        </template>

        <template v-if="item.orderStatus == 0">
          <order-pay :orderId="item.orderId" @refresh="handleQuery">
            <view
              h-60rpx
              rounded-30rpx
              flex
              justify-center
              items-center
              ml-20rpx
              box-border
              px-30rpx
              text-28rpx
              style="border: 2rpx solid #fcc300">
              立即支付
            </view>
          </order-pay>
        </template>
        <template v-if="item.orderStatus == 1 || item.orderStatus == 2 || item.orderStatus == 3 || item.orderStatus == 7">
          <order-refund :orderId="item.orderId" @refresh="handleQuery">
            <view
              h-60rpx
              rounded-30rpx
              flex
              justify-center
              items-center
              ml-20rpx
              box-border
              px-30rpx
              text-28rpx
              style="border: 2rpx solid #fcc300">
              申请退款
            </view>
          </order-refund>
        </template>
        <template v-if="item.orderStatus == 2">
          <confirm-order :orderId="item.orderId" @refresh="handleQuery">
            <view
              h-60rpx
              rounded-30rpx
              flex
              justify-center
              items-center
              ml-20rpx
              box-border
              px-30rpx
              text-28rpx
              style="border: 2rpx solid #fcc300">
              确认收货
            </view>
          </confirm-order>
        </template>
      </view>
    </view>
  </z-paging>
</template>

<script setup lang="ts">
import { getMyTicketGoodsOrderList } from '@/api/ticketGoods'
import type { ToastInst } from 'nutui-uniapp'
import uNavbar from '@/components/navbar/index.vue'
import cancelOrder from './components/cancelOrder.vue'
import orderPay from './components/orderPay.vue'
import delOrder from './components/delOrder.vue'
import orderRefund from './components/orderRefund.vue'
import confirmOrder from './components/confirmOrder.vue'
// import { url } from 'inspector'
// import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
// import {
//   onReachBottom,
//   onPageScroll
// } from '@dcloudio/uni-app'
const isLogin = ref<boolean>(false)
const isShowFetchPhone = ref<boolean>(false)
const toastRef = ref<ToastInst>()
const classifyStyle = ref('1')
const dataList = ref<any>([])
const paging = ref<any>(null)

// 0:待支付, 1:待交付, 2:已交付, 3:已完成, 4:已取消, 5:已退款
const orderStatus = ref<any>({
  0: '待支付',
  1: '待交付',
  2: '已交付',
  3: '已完成',
  4: '已取消',
  5: '已退款',
  6: '退款中',
  7: '拒绝退款'
})
const refundStatus = ref<any>({
  1: '退款中',
  2: '退款中',
  3: '拒绝退款',
  4: '已退款'
})

import config from '@/config/config'
const navBackground = ref({
  background: 'url(' + config.yellowNavBg + ') no-repeat'
})

const tabs = ref([
  { title: '全部', value: '99' },
  { title: '待付款', value: '0' },
  { title: '待交付', value: '1' },
  { title: '已交付', value: '2' },
  { title: '已完成', value: '3' },
  { title: '已取消', value: '4' },
  { title: '售后订单', value: '88' }
])

const query = ref({
  orderStatus: '99',
  orderNo: ''
})

function handleQuery() {
  paging.value.reload()
}

const queryList = (pageNo: number, pageSize: number) => {
  getMyTicketGoodsOrderList({
    ...query.value,
    orderStatus: (query.value.orderStatus == '99' || query.value.orderStatus == '88') ? '' : query.value.orderStatus,
    isSelectAfterSale: query.value.orderStatus == '88'? '1' : '',
    pageNumber: pageNo,
    pageSize: pageSize
  })
    .then((res: any) => {
      paging.value.complete(res.data.result.records)
    })
    .catch((res) => {
      paging.value.complete(false)
    })
}

function toDetail(item: any) {
  let params = 'orderId=' + item.orderId
  if ([1,2,3,4].includes(item.refundStatus)) { // 售后订单
    params = 'orderRefundId=' + item.orderRefundId
  } 
  uni.navigateTo({
    url: '/pages/ticket/orderDetail?' + params
  })
}

onMounted(() => {})

// onReachBottom(() => {
//   console.log('触底函数')
//   categoryRef.value.loadMore()
// })
// onPageScroll((e) => {
//   categoryRef.value.pageScroll(e)
// })
</script>
<style lang="scss">
page {
  --nut-tabs-horizontal-titles-height: 110rpx;
  --nut-tab-pane-padding: 0;
  --nut-tabs-horizontal-titles-item-min-width: 75px;
  // .nut-tabs__titles-item {
  //   width: 200rpx;
  // }
  .nut-tabs__titles-item__text {
    color: #7d7d7d;
    font-size: 28rpx;
   
  }

  .nut-tabs-active .nut-tabs__titles-item__text {
    color: #000000;
    font-size: 36rpx;
  }
}
</style>
<style scoped lang="scss"></style>
